/**
 * Copyright (c) 2021 shanghaozhi
   StatusViewJS is licensed under Mulan PSL v2.
   You can use this software according to the terms and conditions of the Mulan PSL v2.
   You may obtain a copy of Mulan PSL v2 at:
            http://license.coscl.org.cn/MulanPSL2
   THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
   See the Mulan PSL v2 for more details.
 */
import Animator from '@ohos.animator';

export default {
    data:
    {
        compWidth: 40,
        compHeight: 40,
        style: "loading",
        content: "connecting...",
        bgColor: "#dc858585",
        outAnimator: null,
        inAnimator: null,
        state: true,
        translateLength: 80,
        translateStart: 0,
        translateFirst: 0,
        clickType: "",
        isVisible: true,
        durationTime: 800,
    },
    computed: {
        widthPx() {
            return this.compWidth + 'px'
        },
        heightPx() {
            return this.compHeight + 'px'
        },
        translateY() {
            return this.translateFirst + 'px'
        },
        isOut() {
            return this.state
        }
    },
    onInit() {
        console.error('AAA - index1')
    },
    onPageShow() {
        var rect = this.$element("statusId").getBoundingClientRect()
        console.error("AAA - rect" + rect.height)
        if (rect.height <= 80) {
            this.compWidth = 40;
            this.compHeight = 40;
            this.translateLength = 80;
        } else {
            this.compWidth = rect.height / 2;
            this.compHeight = rect.height / 2;
            this.translateLength = rect.height;
        }
        var inOption = {
            duration: this.durationTime,
            easing: "ease-in",
            iterations: 1,
            begin: this.translateStart,
            direction: "normal",
            end: -this.translateLength
        }
        this.inAnimator = Animator.createAnimator(inOption);
        var that = this
        this.inAnimator.onframe = function (value) {
            that.translateFirst = value;
        };
        this.inAnimator.onfinish = function () {
            if (that.style == that.clickType) {
                that.clickType = ""
            }
            that.isVisible = false
            that.state = false
            if (that.clickType == "loading") {
                that.showLoading()
            } else if (that.clickType == "error") {
                that.showError()
            } else if (that.clickType == "complete") {
                that.showComplete()
            }
        }
        var outOption = {
            duration: this.durationTime,
            easing: "ease-out",
            iterations: 1,
            begin: -this.translateLength,
            direction: "normal",
            end: this.translateStart
        }
        this.outAnimator = Animator.createAnimator(outOption);
        this.outAnimator.onframe = function (value) {
            that.state = true
            that.translateFirst = value;
        };
        this.outAnimator.onfinish = function () {
            console.error("AAA finish time - "+new Date().getTime())
            setTimeout(that.animIn(),50000)
//            that.animIn()
        }
        setTimeout(that.animIn(), 1500)
    },
    showComplete() {
//        if (this.isVisible) {
//            this.animIn()
//        } else {
            this.style = "complete"
            this.content = "connection successful"
            this.bgColor = "#dc82ce32"
            this.animOut();
//        }
        this.clickType = "complete"
    },
    animOut() {
        this.translateFirst = -this.translateLength;
        this.state = true
        this.isVisible = true
        this.outAnimator.play()
    },
    animIn() {
        console.error("AAA finish time = "+new Date().getTime())
        this.inAnimator.play()
    },
    showLoading() {
//        if (this.isVisible) {
//            this.animIn()
//        } else {
            this.style = "loading"
            this.content = "connecting..."
            this.bgColor = "#dc858585"
            this.animOut();
//        }
        this.clickType = "loading"
    },
    showError() {
//        if (this.isVisible) {
//            this.animIn()
//        } else {
            this.style = "error"
            this.content = "connection error"
            this.bgColor = "#dcd84315"
            this.animOut();
//        }
        this.clickType = "error"
    },
}